/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-13 Time: 22:41
 *
 *
 *
 * 图片与文字为主，用在列表项
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';
import PropTypes from 'prop-types';
import {FONT_COLOR_TITLE,
        FONT_SIZE_TITLE,
        FONT_COLOR_SUB_TITLE,
        FONT_SIZE_SUB_TITLE} from "../../../../../constant/PHColors"

export default class ImageAndTextCellView extends Component{


  static propTypes = {
    title: PropTypes.string.isRequired,
    workNum: PropTypes.string,
    workStatus:PropTypes.string
  }

  static defaultProps = {
      workNum: "0",
      workStatus:"OFF"
  }

  render() {
    return (
      <View style={styles.body}>
        <View style={styles.textBox}>
          <View style={styles.leftBox}>
              <View style={styles.topBox}>
                <Text style={styles.textEmployees}>
                  {this.props.title}
                </Text>
              </View>
              {
                  this.props.workStatus==="ON"&&
                  <View style={styles.bottomBox}>
                      <Text style={styles.textWorkNum}>
                          处理中({this.props.workNum})
                      </Text>
                  </View>
              }
          </View>
          {
            this.props.workStatus==="ON"?
              <View style={this.props.workNum>"0"?styles.workBox:styles.freeBox}>
                      <Text style={styles.numText}>
                          {this.props.workNum>"0"?"工作中":"空闲"}
                      </Text>
              </View>:
              <View style={styles.offBox}>
                <Text style={styles.numText}>
                    {"离线"}
                </Text>
              </View>
          }

        </View>
      </View>
    )
  }
}


const styles = StyleSheet.create({

  body: {
    height: 50,
    flexDirection: 'row',
    backgroundColor: '#FFF',
    alignItems: 'center'
  },

  textBox: {
    flex: 1,
    flexDirection: 'row'
  },

  leftBox: {
    flex: 1
  },

  topBox: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-start'
  },

  bottomBox: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start'
  },

  textEmployees: {
    fontSize: FONT_SIZE_TITLE,
    color: FONT_COLOR_TITLE,
    marginLeft: 15,
  },

  textWorkNum: {
    fontSize: FONT_SIZE_SUB_TITLE,
    color: FONT_COLOR_SUB_TITLE,
    marginLeft: 15,

  },

  workBox: {
    width: 40,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#d12b27',
    marginRight: 10,
  },

  freeBox: {
    width: 40,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1E90FF',
    marginRight: 10,
  },

  offBox: {
    width: 40,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C0C0C0',
    marginRight: 10,
  },

  numText: {
    fontSize: 12,
    color: '#FFF'
  },
})